<template>
  <div class="correction-header-container flex-between">
    <div class="header-left flex">
      <el-select v-model="classId" placeholder="Select" style="width: 120px">
        <el-option
          v-for="item in taskInfo.classList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span>本题总份数：{{ questionInfo?.submit_count || '0' }}份</span>
      <span>待批改：{{ questionInfo?.await_grade || '0' }}份</span>
      <span>学生：{{ currentAnswer?.student_name || '--' }}</span>
    </div>
    <div class="header-right flex">
      <CorrectHistory
        v-if="historyVis"
        v-model:visible="historyVis"
        :question-info="questionInfo"
        :task-info="taskInfo"
        :currentAnswer="currentAnswer"
      />

      <button
        @click="historyVis = true"
        class="header__btn header__btn-progress"
      >
        批改记录
      </button>

      <span class="header__divider header__divider--big"></span>
      <button
        @click="toggleScreen"
        :title="isFullScreen ? '退出全屏' : '全屏阅卷'"
        class="header__btn header__btn-screen hover"
        :class="{ 'full-screen': isFullScreen }"
      ></button>
      <button @click="goBack" class="header__btn header__btn-back hover">
        退出
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import CorrectHistory from './CorrectHistory.vue'

const router = useRouter()
const props = defineProps({
  taskInfo: {
    required: true
  },
  questionInfo: {
    required: true
  },
  currentAnswer: {
    required: true
  }
})
const classId = defineModel('classId')
const historyVis = ref(false) // 展开历史记录
const isFullScreen = ref(false)
const toggleScreen = () => {
  !isFullScreen.value && enterFullScreen()
  isFullScreen.value && exitFullScreen()
}
const enterFullScreen = () => {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen().catch(err => {
      console.error(err)
    })
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen()
  } else if (document.documentElement.webkitRequestFullscreen) {
    document.documentElement.webkitRequestFullscreen(
      Element.ALLOW_KEYBOARD_INPUT
    )
  } else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen()
  }
  isFullScreen.value = true
}
const exitFullScreen = () => {
  if (document.fullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
    isFullScreen.value = false
  }
}
const goBack = () => {
  if (isFullScreen.value) {
    exitFullScreen()
  }
  router.back()
}

watch(
  () => props.questionInfo,
  () => {
    historyVis.value = false
  }
)
</script>

<style scoped lang="less">
@baseURL: '@/assets/images/single-correct';

.correction-header-container {
  height: 80px;
  background-color: #34495e;
  color: #fff;
  padding: 0 20px;
  .header-left {
    font-size: 20px;
    gap: 30px;
  }
  .header-right {
    gap: 20px;
    .header__divider {
      flex: 0 0 auto;
      width: 1px;
      height: 16px;
      background-color: #d9d9d9;
    }

    .header__divider--big {
      height: 40px;
    }
    .header__btn {
      flex: 0 0 auto;
      border: 0;
      padding: 0;
      outline: 0;
      background-color: transparent;
      line-height: 1;
      font-size: inherit;
      color: inherit;
    }
    .header__btn-progress {
      margin: 0 14px 0 auto;
      cursor: pointer;
      color: #fff;
    }
    .header__btn-record {
      position: relative;
      margin: 0 40px 0 14px;
      cursor: pointer;
    }

    .header__btn-screen {
      margin-left: 25px;
      width: 26px;
      height: 26px;
      background-image: url('@{baseURL}/btn-fullscreen.png');
      background-size: contain;
    }

    .full-screen {
      background-image: url('@{baseURL}/btn-restorescreen.png');
      background-size: contain;
    }

    .header__btn-back {
      margin: 0 0 0 25px;
      padding-left: 32px;
      background-image: url('@{baseURL}/btn-quit.png');
      background-size: 23px 27px;
      background-repeat: no-repeat;
      background-position: left;
      line-height: 27px;
    }
  }
}
</style>
